<template>
  <el-drawer v-model="drawer" size="60%" :before-close="handleClose">
    <template #header>
      <div class="custom-detail-title">
        {{ customInfo?.customer?.name }}
      </div>
    </template>
    <div class="drawer-content custom-detail">
      <div class="custom-detail-tag">
        <el-tag :closable="showItem" @close="closeTag(item)" v-for="(item, i) in customInfo?.label" :style="{
          color: item.text_color,
          background: item.background_color,
          borderColor: item.border_color,
          marginRight: '10px',
          marginBottom: '10px',
        }">{{ item.label_name }}</el-tag>

        <el-button @click="addLabel" v-if="showItem" size="small" style="margin: 0 10px 10px 0">
          + 标签
        </el-button>
      </div>
      <div class="custom-detail-info">
        <div class="info-item">
          <el-icon class="info-item-icon">
            <IEpTimer />
          </el-icon>
          <span> 录入时间：{{ customInfo?.customer?.created_at }} </span>
        </div>
        <div class="info-item">
          <el-icon class="info-item-icon">
            <IEpUserFilled />
          </el-icon>
          <span> 最后负责销售：{{ customInfo?.customer?.owner }} </span>
        </div>
        <div class="info-item">
          <el-icon class="info-item-icon">
            <IEpBriefcase />
          </el-icon>
          <span> 最后跟进时间：{{ customInfo?.customer?.updated_at }} </span>
        </div>
        <div class="info-item" v-if="showItem">
          <el-icon class="info-item-icon" style="font-size: 20px; font-weight: 800; cursor: pointer" @click="openDetail">
            <IEpEdit />
          </el-icon>
        </div>
      </div>
      <div class="custom-detail-tab">
        <el-tabs type="card" @tab-click="handleClick" v-model="activeName">
          <el-tab-pane label="跟进记录" name="1">
            <div class="detail-tab-content">
              <tab1 ref="tab1Ref" :dataInfo="dataInfo" :showItem="showItem" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="客户资料" name="2">
            <div class="detail-tab-content">
              <tab2 :showItem="showItem" ref="tab2Ref" :dataInfo="dataInfo" :customer="customInfo.customer"
                @refreshTab2="refreshTable" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="联系人" name="3">
            <div class="detail-tab-content">
              <tab3 :showItem="showItem" ref="tab3Ref" :dataInfo="dataInfo" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="商机" name="9">
            <div class="detail-tab-content">
              <tab9 :showItem="showItem" :dataInfo="dataInfo" ref="tab9Ref" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="合同" name="4">
            <div class="detail-tab-content">
              <tab4 :showItem="showItem" :customInfo="customInfo" :dataInfo="dataInfo" ref="tab4Ref" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="商城订单" name="5">
            <div class="detail-tab-content">
              <tab5 :showItem="showItem" ref="tab5Ref" :customInfo="customInfo" :dataInfo="dataInfo" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="回款" name="6">
            <div class="detail-tab-content">
              <tab6 :showItem="showItem" ref="tab6Ref" :customInfo="customInfo" :dataInfo="dataInfo" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="优惠券" name="7">
            <div class="detail-tab-content">
              <tab7 :showItem="showItem" ref="tab7Ref" :customInfo="customInfo" :dataInfo="dataInfo" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="8">
            <div class="detail-tab-content">
              <tab8 :showItem="showItem" ref="tab8Ref" :dataInfo="dataInfo" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <div class="drawer-foot">
      <el-button @click="drawer = false">关闭</el-button>
      <el-button type="primary" @click="sureFun">确认</el-button>
    </div> -->
  </el-drawer>
  <!-- 编辑客户信息 -->
  <!-- 公海  -->
  <pooDialog ref="addDialogRef" @refreshTable="refreshTable" v-if="pageType == 'pool'" />
  <!-- 我的  -->
  <myDialog v-else-if="pageType == 'my'" ref="addDialogRef" @refreshTable="refreshTable" />
  <!-- 标签  -->
  <labelDialog ref="labelDialogRef" :hasLabel="customInfo?.label" @refreshList="refreshTable" />
</template>
<script setup>
import { detailApi as poolDetailApi } from "@/plugins/api/customer/manage/pool";
import { detailApi as customDetailApi } from "@/plugins/api/customer/manage/my";
import { deleteLabelApi } from "@/plugins/api/customer/manage/my";
import labelDialog from "./DialogLabel.vue";
import pooDialog from "./DialogPool.vue";
import myDialog from "./DialogMyCustom.vue";
import tab1 from "./Tab1.vue";
import tab2 from "./Tab2.vue";
import tab3 from "./Tab3.vue";
import tab9 from "./Tab9.vue";
import tab4 from "./Tab4.vue";
import tab5 from "./Tab5.vue";
import tab6 from "./Tab6.vue";
import tab7 from "./Tab7.vue";
import tab8 from "./Tab8.vue";
const props = defineProps({
  closable: {
    type: Boolean,
    default: false,
  },
});
let pageType = ref(null); //判断是哪个页面
const drawer = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
// 基本信息
let addDialogRef = ref(null);
function refreshTable() {
  if (pageType.value == "my") {
    customInfoFun(dataInfo.value.id);
  } else {
    poolInfoFun(dataInfo.value.id);
  }
  emit("refreshParent");
}
function openDetail() {
  addDialogRef.value.initFun("update", customInfo.value.customer || {});
}

// tag
let labelDialogRef = ref(null);
function addLabel() {
  labelDialogRef.value.initFun(dataInfo.value);
}
function closeTag(item, i) {
  deleteLabelApi({
    customer_id: dataInfo.value.id,
    label_id: item.label_id,
  }).then(() => {
    ElMessage.success("删除成功！");
    refreshTable();
  });
}
// 初始化
let showItem = ref(false);
let dataInfo = ref({});
function initFun(row, type, page) {
  dataInfo.value = Object.assign({}, row);
  showItem.value = type;
  drawer.value = true;
  pageType.value = page;
  if (page == "my") {
    customInfoFun(row.id);
  } else {
    poolInfoFun(row.id);
  }
  activeName.value = "1";
  nextTick(() => {
    tab1Ref.value.initFun();
  });
}
// 确认
function sureFun() {
  drawer.value = false;
}

// 客户详情
let customInfo = ref({});
// 公海详情
function poolInfoFun(id) {
  poolDetailApi({
    id: id,
  }).then((res) => {
    customInfo.value = { ...res };
  });
}
// 我的详情
function customInfoFun(id) {
  customDetailApi({
    id: id,
  }).then((res) => {
    customInfo.value = { ...res };
  });
}
//
let activeName = ref("4");
let tab1Ref = ref(null);
let tab2Ref = ref(null);
let tab3Ref = ref(null);
let tab9Ref = ref(null);
let tab4Ref = ref(null);
let tab5Ref = ref(null);
let tab6Ref = ref(null);
let tab7Ref = ref(null);
let tab8Ref = ref(null);
function handleClick(data) {
  let index = data.props.name;
  if (index == 1) {
    nextTick(() => {
      tab1Ref.value.initFun();
    });
  } else if (index == 2) {
    nextTick(() => {
      tab2Ref.value.initFun();
    });
  } else if (index == 3) {
    nextTick(() => {
      tab3Ref.value.initFun();
    });
  } else if (index == 9) {
    nextTick(() => {
      tab9Ref.value.initFun();
    });
  } else if (index == 4) {
    nextTick(() => {
      tab4Ref.value.initFun();
    });
  } else if (index == 5) {
    nextTick(() => {
      tab5Ref.value.initFun();
    });
  } else if (index == 6) {
    nextTick(() => {
      tab6Ref.value.initFun();
    });
  } else if (index == 7) {
    nextTick(() => {
      tab7Ref.value.initFun();
    });
  } else if (index == 8) {
    nextTick(() => {
      tab8Ref.value.initFun();
    });
  }
}
defineExpose({
  initFun,
});
const emit = defineEmits(["refreshParent"]);
onMounted(() => { });
</script>
<style lang="scss" scoped>
.custom-detail-title {
  font-size: 24px;
  font-weight: 500;
  color: #172b4d;
  line-height: 22px;
}

.custom-detail {
  .custom-detail-info {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;

    .info-item {
      margin-right: 20px;

      .info-item-icon {
        font-size: 16px;
        vertical-align: middle;
        font-weight: 600;
        color: #5e6c84;
      }

      span {
        vertical-align: middle;
        font-size: 14px;
        font-weight: 500;
        color: #5e6c84;
      }
    }
  }

  .custom-detail-tab {
    :deep(.is-active) {
      // border-bottom-color: #e4e7ed;
      background-color: #005ecc;
      color: white;
    }
  }

  .detail-tab-content {
    width: 100%;
    height: calc(100vh - 220px);
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
